/**
 * 学习目标：👎非受控组件
 * 含义：表单的数据可由dom管理，可以不受state的控制
 * 推荐： 👍使用受控组件收集表单数据
 *        受控组件，更符合数据驱动的思想， 而且不容易产生id冲突的问题
 *
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
  handleClick = () => {
    // 这种不需要state管理数据的表单元素，称之为非受控组件，
    // 获取数据：
    let data = {
      userName: document.querySelector('#username').value,
      desc: document.querySelector('#desc').value,
      city: document.querySelector('#city').value,
      isSingle: document.querySelector('#isSingle').checked,
    };

    console.log(data, 'data');
  };

  render() {
    return (
      <div>
        姓名：
        <input type="text" name="username" id="username" />
        <br />
        描述：<textarea name="desc" id="desc"></textarea>
        <br />
        城市：
        <select name="city" id="city">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input name="isSingle" type="checkbox" id="isSingle" />
        <button onClick={this.handleClick}>点我</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
